<template>
	<view class="my-new-orderform">
		<!-- 表单 -->
		<cl-form class="form" ref="form" :model.sync="form" :rules="rules" label-width="200rpx">
			<cl-form-item prop="adminVal" label="预约人">
				<cl-input v-model="form.adminVal" placeholder="请填写预约人"></cl-input>
			</cl-form-item>
			<cl-form-item prop="phoneVal" label="电话">
				<cl-input v-model="form.phoneVal" placeholder="请填写电话"></cl-input>
			</cl-form-item>
			<cl-form-item prop="subJectNameVal" label="项目名称">
				<cl-select v-model="form.subJectNameVal" :options="subjectOptions" placeholder="请填写项目名称"></cl-select>
			</cl-form-item>
			<cl-form-item prop="startTimeVal" label="项目时间">
				<cl-select v-model="form.startTimeVal" :options="startTimeOptions" placeholder="请填写项目时间"></cl-select>
			</cl-form-item>
			<cl-form-item prop="timeVal" label="项目时长">
				<cl-select v-model="form.timeVal" :options="timeOptions" placeholder="请填写项目时长"></cl-select>
			</cl-form-item>
		</cl-form>
		<!-- 新建 -->
		<cl-button type="warning" @tap="onSubmit">新建</cl-button>
	</view>
</template>

<script>
	export default {
		name: "MyNewOrderForm",
		data() {
			var phoneRule = (rule, value, callback) => {
				console.log('rule, value, callback', rule, value, callback)
			};
			return {
				// 表单校验
				rules: {
					adminVal: {
						required: true,
						message: "预约人不能为空"
					},
					phoneVal: [{
						required: true,
						message: '电话不能为空',
						trigger: 'blur'
					}, ],
					subJectNameVal: {
						required: true,
						message: "项目名称不能为空"
					},
					startTimeVal: {
						required: true,
						message: "项目时间不能为空"
					},
					timeVal: {
						required: true,
						message: "项目时长不能为空"
					},
				},
				// 表单
				form: {
					adminVal: "", // 预约人
					phoneVal: "", // 电话
					subJectNameVal: "", // 项目名称
					startTimeVal: "", // 项目时间
					timeVal: "", // 项目时长
				},
				subjectOptions: [{
						label: "海南东山羊",
						value: 1
					},
					{
						label: "乌鱼子",
						value: 2
					}
				],
				startTimeOptions: [{
						label: "海南东山羊",
						value: 1
					},
					{
						label: "乌鱼子",
						value: 2
					}
				],
				timeOptions: [{
						label: "海南东山羊",
						value: 1
					},
					{
						label: "乌鱼子",
						value: 2
					}
				]
			}
		},
		methods: {
			// 新建提交
			onSubmit() {
				// 校验手机号
				if (!(/^1[3-9]\d{9}$/.test(this.form.phoneVal))) {
					return false;
				}
				this.$refs["form"].validate(valid => {
					if (valid) {
						console.log("验证通过提交", this.form);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-new-orderform {
		height: 100%;
		padding: 0 40rpx 0 40rpx;

		.form {
			height: 100%;
		}
	}

	/deep/ .cl-button {
		width: 100%;
	}

	/deep/ .cl-select {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}

	/deep/ .cl-select.is-border {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}
</style>
